<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters">
        <el-form-item>
					<el-input v-model="filters.orderNo" placeholder="订单号"></el-input>
				</el-form-item>
				<el-form-item>
					<el-date-picker
            v-model="filters.date"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
				</el-form-item>
        <el-form-item>
				<el-select v-model="filters.buyAim" clearable placeholder="购买目的" style="width:120px">
						<el-option value="自购">自购</el-option>
            <el-option value="送礼">送礼</el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="handleFilter">查询</el-button>
				</el-form-item>
			</el-form>
		</el-col>
		<!--列表-->
		<el-table :data="list" highlight-current-row v-loading="listLoading" style="width: 100%;">
			<el-table-column prop="orderNo" label="订单号" width="120">
			</el-table-column>
      <el-table-column prop="orderCreateTime" label="订单生成时间"  width="120">
			</el-table-column>
      <el-table-column prop="status" label="订单状态" width="120">
         <template slot-scope="scope">
           <span>{{ 0==scope.row.status?"未付款":"已付款"}}</span>
				</template>
			</el-table-column>
      <el-table-column label="订单详情" width="120">
				<template slot-scope="scope">
					<a href="javascript:;" @click="handleDetail(scope.row)">订单详情</a>
				</template>
			</el-table-column>
			<el-table-column prop="userName" label="用户名" width="120">
			</el-table-column>
      <el-table-column prop="buyAim" label="购买目的" width="120">
        <template slot-scope="scope">
           <span>{{ 0==scope.row.buyAim?"自购":"送礼"}}</span>
				</template>
			</el-table-column>
      	<el-table-column prop="phone" label="手机号" width="120">
			</el-table-column>
      <el-table-column prop="consignee" label="收货人" width="120">
			</el-table-column>
      <el-table-column prop="address" label="收货地址" width="120">
			</el-table-column>
      <el-table-column prop="deliveryType" label="配送方式" width="120" :formatter="formatDeliveryType">
			</el-table-column>			
			
		</el-table>

    <!--工具条-->
		<el-col :span="24" class="toolbar">
			<!-- <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button> -->
			<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="20" :total="total" style="float:right;">
			</el-pagination>
		</el-col>

    		<!--更多界面-->
		<el-dialog title="查询详情" v-model="moreFormVisible" :close-on-click-modal="false">
      <el-table :data="moreForm" highlight-current-row  style="width: 100%;">
        <el-table-column prop="productId" label="商品ID" width="120">
        </el-table-column>
        <el-table-column prop="productName" label="商品名称" width="120">
        </el-table-column>
        <el-table-column prop="price" label="价格" width="80">
        </el-table-column>
        <el-table-column prop="num" label="数量" width="80">
        </el-table-column>
        <el-table-column label="特性" min-width="180">
          <template slot-scope="scope">
          <span>{{scope.row.attribute}}</span>
          </template>
        </el-table-column>
		  </el-table>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="moreFormVisible = false">取消</el-button>
			</div>
		</el-dialog>
	</section>
</template>

<script>
import util from "../../common/js/util";
console.log(util);
//import NProgress from 'nprogress'
import { fetchOrders } from "../../api/api";
export default {
  data() {
    return {
      filters: {
        orderNo: undefined,
        date: [],
        buyAim: undefined
      },
      list: [],
      total: 0,
      currentPage: 1,
      listLoading: false,
      sels: [], //列表选中列
      moreFormVisible: false,
      moreForm: []
    };
  },
  methods: {
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getList();
    },
    handleFilter() {
      if (isNaN(Number(this.filters.orderNo)) && this.filters.orderNo) {
        this.$message({
          message: "输入参数不是整数",
          type: "warning"
        });

        return;
      }

      this.getList();
    },
    //获列表
    getList() {
      console.log(this.filters.date);
      let orderNo = this.filters.orderNo
        ? Number(this.filters.orderNo)
        : undefined;
      let start = this.filters.date[0];
      let end = this.filters.date[1];
      let buyAim = !this.filters.buyAim
        ? undefined
        : "自购" === this.filters.buyAim ? 1 : 2;

      let conditions = {
        orderNo : orderNo ? orderNo : undefined,
        start: start ? util.formatDate.format(start, "yyyy-MM-dd"): undefined,
        end: end ? util.formatDate.format(end, "yyyy-MM-dd") : undefined,
        buyAim: buyAim ? buyAim : undefined
      };

      let para = {
        currentPage: this.currentPage,
        conditions : encodeURIComponent(JSON.stringify(conditions))
      }

      this.listLoading = true;
      //NProgress.start();
      fetchOrders(para).then(res => {
        console.log(res);
        this.total = res.data.total;
        this.list = res.data.orders;
        this.listLoading = false;
        //NProgress.done();
      });
    },
    handleDetail(row) {
      this.moreFormVisible = true;
      this.moreForm = row.products;
    },
    formatDeliveryType(row) {
      let type = ["未知", "闪购", "自提", "快递"];
      let idx = row.deliveryType || "0";
      return type[idx];
    }
  },
  mounted() {
    this.getList();
  }
};
</script>

<style scoped>
</style>